import { ElRadioGroup, ElRadioButton, ElMenu } from 'element-plus'
import SubMenu from './SubMenu.vue'
import type { FileMenu } from './types'
import styles from './SlideMenu.module.less'
import { useFloderMenuStore } from '@/stores/index'

export default defineComponent({
  props: {
    fileMenu: {
      type: Array as PropType<FileMenu>,
      default: () => []
    }
  },
  emits: ['selectHandleItem'],
  setup(props, { emit }) {
    const isCollapse = ref(false)
    // const handleOpen = (key: string, keyPath: string[]) => {
    //   console.log(key, keyPath)
    // }
    // const handleClose = (key: string, keyPath: string[]) => {
    //   console.log(key, keyPath)
    // }
    const menuTarget = ref<any>(null)
    const floderMenuStore = useFloderMenuStore()
    floderMenuStore.$subscribe((mutation, state) => {
      try {
        state.openMenu.forEach((item) => {
          menuTarget.value?.open(item)
        })
      } catch (error) {
        console.log()
      }
    })
    const selectHandleItem = (item: any) => {
      emit('selectHandleItem', item)
    }
    return () => {
      return (
        <>
          <ElRadioGroup v-model={isCollapse.value} style="margin-bottom:20px">
            <ElRadioButton label={false}>展开</ElRadioButton>
            <ElRadioButton label={true}>折叠</ElRadioButton>
          </ElRadioGroup>
          <ElMenu
            ref={menuTarget}
            collapse={isCollapse.value}
            class={styles.customeStyle}
          >
            <SubMenu
              fileMenu={props.fileMenu}
              onSelectHandleItem={(item) => {
                selectHandleItem(item)
              }}
            ></SubMenu>
          </ElMenu>
        </>
      )
    }
  }
})
